import React, { useState, useEffect } from "react";
import "./style.scss";
import Banner from "@views/viewCommon/Banner";
import { InterfaceG } from "@config/Config";
import yhTools from "@tools/yh";
import { Toast } from "antd-mobile";
// import { openWebView } from "@tools/native/navigate";
import MainLayout from "@component/mainLayout/mainLayout";
function PaymentDiscount(props) {
	/*******************业务方法 start************************/
	const [bannerList_top, set_bannerList_top] = useState([]); //顶部轮播banner
	const [bannerList_bottom1, set_bannerList_bottom1] = useState([]); //底部banner1
	const [bannerList_bottom2, set_bannerList_bottom2] = useState([]); //底部banner2
	const [bannerList_bottom3, set_bannerList_bottom3] = useState([]); //底部banner3
	const [bannerList_bottom4, set_bannerList_bottom4] = useState([]); //底部banner4
	const [bannerList_bottom5, set_bannerList_bottom5] = useState([]); //底部banner5
	const [querySaveZone, set_querySaveZone] = useState({});
	const [todayCouponList, set_todayCouponList] = useState([]);
	const [is_animation, set_is_animation] = useState(true);

	/**
	 * @msg: 查询满足自定义banner
	 * @param {*}
	 * @return {*}
	 */
	function customBanner_queryMeetCustomBanner() {
		return new Promise((resolve, reject) => {
			const params = {
				url: InterfaceG.customBanner_queryMeetCustomBanner,
				params: {
					productCode: "601",
					sourceCode: "pay_preferential"
				}
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					const { data } = res;
					data &&
						data.length > 0 &&
						data.map(v => {
							switch (v.positionCode) {
								case "pay_preferential_top":
									set_bannerList_top(v.meetBannerImgRespList);
									break;
								case "pay_preferential_bottom1":
									set_bannerList_bottom1(v.meetBannerImgRespList);
									break;
								case "pay_preferential_bottom2":
									set_bannerList_bottom2(v.meetBannerImgRespList);
									break;
								case "pay_preferential_bottom3":
									set_bannerList_bottom3(v.meetBannerImgRespList);
									break;
								case "pay_preferential_bottom4":
									set_bannerList_bottom4(v.meetBannerImgRespList);
									break;
								case "pay_preferential_bottom5":
									set_bannerList_bottom5(v.meetBannerImgRespList);
									break;
								default:
									break;
							}
						});
				} else {
					Toast.info(res.message, 2);
				}
			});
		});
	}

	/**
	 * @msg: 今日好券
	 * @param {*}
	 * @return {*}
	 */
	function couponCenter_queryTodayGreetCoupon(load) {
		return new Promise((resolve, reject) => {
			let params = {
				url: InterfaceG.couponCenter_queryTodayGreetCoupon
			};
			yhTools.request(params).then(res => {
				if (load) {
					Toast.hide();
				}
				resolve();
				if (res.code === "0") {
					set_todayCouponList(res.data);
				} else {
					Toast.info(res.message);
				}
			});
		});
	}

	/**
	 * @msg:为你省钱
	 * @param {*}
	 * @return {*}
	 */
	function couponCenter_querySaveZone() {
		return new Promise((resolve, reject) => {
			let params = {
				url: InterfaceG.couponCenter_querySaveZone
			};
			yhTools.request(params).then(res => {
				resolve();
				if (res.code === "0") {
					set_querySaveZone(res.data);
				} else {
					Toast.info(res.message);
				}
			});
		});
	}

	/**
	 * @msg:初始化页面数据
	 * @param {*}
	 * @return {*}
	 */
	function initData() {
		Toast.loading("加载中", 100);
		let p_customBanner_queryMeetCustomBanner =
			customBanner_queryMeetCustomBanner();
		let p_couponCenter_queryTodayGreetCoupon =
			couponCenter_queryTodayGreetCoupon();
		let p_couponCenter_querySaveZone = couponCenter_querySaveZone();
		Promise.all([
			p_couponCenter_queryTodayGreetCoupon,
			p_customBanner_queryMeetCustomBanner,
			p_couponCenter_querySaveZone
		]).finally(() => {
			Toast.hide();
		});
	}

	/**
	 * @msg: 查询授信状态
	 * @param {*}
	 * @return {*}
	 */
	const credit_queryCreditApplyStatus = () => {
		const objs = {
			url: InterfaceG.credit_queryCreditApplyStatus,
			params: { pruductNum: "601" }
		};
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				if (res.data) {
					const { applyStatus } = res.data;
					//0未授信，1已授信，2授信中，4授信拒绝
					let pathname = "";
					if (applyStatus === "0") {
						pathname = "/xhfHomeNoCredit";
					} else if (applyStatus === "1") {
						pathname = "/xhfHomeCredit";
					} else if (applyStatus === "2") {
						pathname = "/xhfHomeCrediting";
					} else if (applyStatus === "4") {
						pathname = "/xhfHomeNoCredit";
					}
					props.history.push({
						pathname
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	/*******************业务方法 end************************/

	useEffect(() => {
		initData();
	}, []);

	/*******************点击事件 start************************/

	/**
	 * @msg: 立即领取
	 * @param {*} couponStatus //优惠券状态，0，去使用；1，待激活；2，立即领取
	 * @param {*} i //索引
	 * @return {*}
	 */
	const receive = (couponStatus, i) => {
		if (couponStatus === "0") {
			Toast.loading("加载中...", 100);
			credit_queryCreditApplyStatus();
		} else if (couponStatus === "1") {
			props.history.push(`/activateCoupon/${todayCouponList[i].couponNo}`);
		} else if (couponStatus === "2") {
			const params = {
				url: InterfaceG.drawCoupon,
				params: { no: todayCouponList[i].couponNo },
				_alertShow: false
			};
			Toast.loading("加载中...", 100);
			yhTools.request(params).then(res => {
				Toast.hide();
				if (res.code === "0") {
					if (res.data.xhfOpenStatus === "0") {
						//未开通
						Toast.info("领取成功，开通小辉付即可使用", 2);
						setTimeout(() => {
							props.history.push("/xhfHomeNoCredit");
						}, 2000);
					} else {
						//开通
						Toast.info("领取成功，请至我的卡券页面查看", 2);
						setTimeout(() => {
							Toast.loading("加载中...", 100);
							couponCenter_queryTodayGreetCoupon(true);
						}, 2000);
					}
				} else {
					Toast.info(res.message, 2);
				}
			});
		}
	};

	/**
	 * @msg: 为你省钱
	 * @param {*}
	 * @return {*}
	 */
	function saveMoney() {
		if (querySaveZone.creditStatus === "0") {
			props.history.push({
				pathname: `/xhfHomeNoCredit`,
				query: { flag: false }
			});
		} else {
			props.history.push({
				pathname: `/paymentDiscount/saveMoney`
			});
		}
	}
	/*******************点击事件 end************************/

	let _pageParams = {
		header: {
			title: "支付优惠",
			headerBackground: "#fff",
			titleColor: "#232323",
			newBackButt: true
		},
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	const { creditStatus, totalDiscountCount } = querySaveZone;
	const creditStatusText = {
		0: "开通小辉付天天随机减，最高99",
		1: "用小辉付天天随机减，最高99"
	};
	const btnText = {
		0: "去使用",
		1: "待激活",
		2: "立即领取"
	};
	return (
		<MainLayout pageParams={_pageParams}>
			<div className="page-paymentDiscount">
				<Banner bannerList={bannerList_top} history={props.history} />
				<div className="paymentDiscount-saveMoney ui-flex ui-flex-justify-center ui-flex-align-end">
					<div
						className="saveMoney-content ui-flex ui-flex-justify-space-between"
						onClick={() => {
							saveMoney();
						}}
					>
						<div className="content-title ui-flex ui-flex-align-center">
							<i className="title-icon"></i>
							<span className="title-text f-32 f-b">为你省钱</span>
						</div>
						<div className="content-word ui-flex ui-flex-align-center">
							<span className="word-text f-24">
								{creditStatusText[creditStatus]}
								{["2", "3"].includes(creditStatus) &&
									`使用永辉钱包累计已赚${totalDiscountCount}元`}
							</span>
							<i className="word-icon"></i>
						</div>
					</div>
				</div>
				<div className="paymentDiscount-todayCoupon">
					<div className="todayCoupon-title ui-flex  ui-flex ui-flex-justify-space-between ui-flex-align-center">
						<div className="title-bold f-36 f-b">今日好券</div>
						<div
							className="title-normal ui-flex ui-flex-align-center f-28 c-999"
							onClick={() => {
								props.history.push("/paymentDiscount/coupon");
							}}
						>
							<span className="normal-text">查看已领取券</span>
							<i className="normal-icon"></i>
						</div>
					</div>
					<div className="todayCoupon-content">
						<ul className="content-list ui-flex ui-flex ui-flex-wrap">
							{todayCouponList &&
								todayCouponList.length > 0 &&
								todayCouponList.map((v, i) => {
									if (i < 5) {
										return (
											<li className="list-li" key={`${v.couponName}${i}`}>
												<div
													className={
														"list-li-item list-li-move ui-flex ui-flex-column ui-flex ui-flex-align-center"
													}
												>
													<div className="li-title f-20 f-b">
														{["04", "05"].includes(v.couponTypeNo)
															? "指定商品券"
															: "小辉付支付券"}
													</div>
													<div className="li-money">
														<i className="money-i f-36 f-b">¥</i>
														<span className="money-num f-56 f-b">
															{v.couponAmount}
														</span>
													</div>
													<div className="li-tips f-22">
														{v.couponUseCondition}
													</div>
													<div
														className={
															"li-btn  " +
															(v.couponStatus === "2" ? "" : " li-btn-active")
														}
														onClick={() => {
															yhTools.debounceNew(
																receive(v.couponStatus, i),
																200
															);
														}}
													>
														<span className="btn-text f-22 f-b">
															{btnText[v.couponStatus]}
														</span>
													</div>
												</div>
											</li>
										);
									}
								})}
							{todayCouponList && todayCouponList.length > 0 && (
								<li
									className="list-li"
									onClick={() => {
										props.history.push("/paymentDiscount/collectCouponCenter");
									}}
								>
									<div className="list-li-item list-li-btn ui-flex ui-flex-column ui-flex ui-flex-align-center">
										<div className="li-add"></div>
										<div className="li-text f-24 f-b">去抢券&gt;</div>
									</div>
								</li>
							)}
						</ul>
					</div>
				</div>
				<div className="paymentDiscount-jump">
					<ul className="jump-list ui-flex ui-flex-wrap">
						{/* 新人专区 */}
						<li
							className="list-li ui-flex ui-flex-justify-space-between ui-flex-align-center"
							onClick={() => {
								props.history.push("/newbornZone");
							}}
						>
							<div className="li-content">
								<div className="content-title f-36 f-b">新人专区</div>
								<div className="content-word f-24 c-999">小辉付使用攻略</div>
							</div>
							<div className="li-icon li-icon-1"></div>
						</li>
						{/* 绑卡好礼 */}
						<li
							className="list-li ui-flex ui-flex-justify-space-between ui-flex-align-center"
							onClick={() => {
								props.history.push("/bindBankAdv");
							}}
						>
							<div className="li-content">
								<div className="content-title f-36 f-b">绑卡好礼</div>
								<div className="content-word f-24 c-999">绑卡签约享好礼</div>
							</div>
							<div className="li-icon li-icon-2"></div>
						</li>
						{/* 领券中心 */}
						<li
							className="list-li ui-flex ui-flex-justify-space-between ui-flex-align-center"
							onClick={() => {
								props.history.push("/paymentDiscount/collectCouponCenter");
							}}
						>
							<div className="li-content">
								<div className="content-title f-36 f-b">领券中心</div>
								<div className="content-word f-24 c-999">满减券放肆领</div>
							</div>
							<div className="li-icon li-icon-3"></div>
						</li>
						{/* 邀请好友 */}
						<li
							className="list-li ui-flex ui-flex-justify-space-between ui-flex-align-center"
							onClick={() => {
								sessionStorage.setItem(
									"inviteFromPage",
									"/paymentDiscount/index"
								);
								props.history.push("/inviteHome");
							}}
						>
							<div className="li-content">
								<div className="content-title f-36 f-b">邀请好友</div>
								<div className="content-word f-24 c-999">邀请好友送5元</div>
							</div>
							<div className="li-icon li-icon-4"></div>
						</li>
					</ul>
				</div>
				<div className="paymentDiscount-recommend">
					<div className="recommend-title f-36 f-b">为你推荐</div>
					<div className="recommend-list">
						<Banner bannerList={bannerList_bottom1} history={props.history} />
						<Banner bannerList={bannerList_bottom2} history={props.history} />
						<Banner bannerList={bannerList_bottom3} history={props.history} />
						<Banner bannerList={bannerList_bottom4} history={props.history} />
						<Banner bannerList={bannerList_bottom5} history={props.history} />
					</div>
				</div>
			</div>
		</MainLayout>
	);
}

export default PaymentDiscount;
